<template>
  <div class="page" @touchstart="onStart" @touchmove="onMove" @touchend="onEnd" v-if="isLoad">
    <div class="box" :style="flipPage.style">
      <template v-for="(flip, index) in flipPage.list">
        <div class="box-page" :style="flip.front.style">
          <div class="box-front">
            <img :src="flip.front_img" alt="" class="blockImg" />
            正面1 正面2 正面3 正面4 正面5 正面6 正面7 正面8 正面9 正面10 正面11 正面12 正面13
          </div>
        </div>
        <div class="box-page" :style="flip.back.style">
          <div class="box-back">
            <img :src="flip.back_img" alt="" class="blockImg" />
            反面1 反面2 反面3 反面4 反面5 反面6 反面7 反面8 反面9 反面10 反面11 反面12 反面13 反面
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { FlipPage } from './class/FlipTwo.js'
export default {
  data() {
    return {
      flipPage: null,
      isLoad: false
    }
  },
  methods: {
    onStart(e) {
      this.flipPage.onStart(e)
    },
    onMove(e) {
      this.flipPage.onMove(e)
    },
    onEnd(e) {
      this.flipPage.onEnd(e)
    }
  },
  mounted() {
    this.flipPage = new FlipPage()
    this.isLoad = true
  }
}
</script>
<style type="text/css" lang="scss">
.page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.box {
  width: 200px;
  height: 200px;
  //border: 1px solid #000;
  position: relative;
  transform-style: preserve-3d;
  margin: 100px auto;
  &-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    img {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
  &-front {
    background: grey;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  &-back {
    background: #646495;
    transform: scale(-1, 1);
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
}
.box1 {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  transform: translate(10px, 0) rotate(30deg) scale(1.5, 1);
  clip-path: polygon(0 0, 50px 0, 50px 50px, 0 50px);
}
.blockImg {
  width: 100%;
  height: 100%;
  display: block;
}
body {
  margin: 0;
}
</style>
